<template>
    <div class="report-cells">

        <section v-for="(item, index) in items"
            :key="item.rid"
            class="cell"
            :index="index">
            <a class="cover-image"
                :title="item.hTitle"
                :href="`/report/${item.rid}`"
                target="report_detail">
                <img :src="item.cover_image"
                    :alt="item.hTitle"
                    loading="lazy" />
            </a>
            <div class="cell-content">
                <div>
                    <div class="tlt">
                        <a class="link ellipsis-2"
                            :title="item.hTitle"
                            :href="`/report/${item.rid}`"
                            target="report_detail"
                            v-html="item.title" />
                    </div>

                    <VcEllipsis class="desc"
                        :content="item.introduction"
                        :label-hover="true"
                        label-align="end"
                        max-height="80px"
                        expandText="更多" />
                </div>
                <p class="cell-ft">
                    <span>{{ item.author }}</span>
                    <span>{{ item.date_publish }}</span>
                </p>
            </div>
        </section>

    </div>
</template>

<script setup lang="ts">
// import VcImgLazy from '@/vc/lazy'
// import VcEllipsis from '@/vc/ellipsis'
import { clipHTML } from '@/utils'
// import ReportImgList from '@/components/report/reportImgList.vue'

const props = defineProps({
    items: {
        type: Array,
        default: () => []
    },
})

const list = computed(() => {
    return props.items?.map(item => {
        item.hTitle = item.title?.replace(/<span class="highlight-text">|<span class='highlight-text'>|<\/span>/ig, '') || ''
        item.introduction = clipHTML(item.introduction)
        return item
    }) || []
})
</script>

<style lang="scss" scoped>
.report-cells {
    .cell {
        position: relative;
        display: flex;
        gap: 20px;

        &:not(:first-child) {
            padding-top: 20px;
            margin-top: 20px;
            border-top: 1px solid var(--el-border-color);
        }
    }

    .cover-image {
        flex-shrink: 0;
        position: relative;
        width: 140px;
        overflow: hidden;
        filter: drop-shadow(0 0 10px rgba(175, 195, 207, 1));
        cursor: pointer;

        img {
            width: 100%;
            height: auto;
            border-radius: 6px;
            transition: all 0.2s linear;

            &:hover {
                transform: scale(1.2);
            }
        }
    }

    .cell-content {
        position: relative;
        width: calc(100% - 20px - 140px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        z-index: 1;
    }

    .tlt {
        width: 100%;
        display: flex;

        .link {
            flex: 1;
            font-size: 18px;
            line-height: 30px;
            font-family: var(--vc-pingfang-bold);
        }
    }

    .desc {
        margin-top: 10px;
        font-size: 14px;
        line-height: 22px;
        word-break: break-all;
        color: #666666;

        ::v-deep(.vc-ellipsis-content) {
            >p {
                &:first-child {
                    margin-top: 0;
                }
            }
        }
    }

    .cell-ft {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-top: 20px;
        margin-bottom: 0;
        font-size: 14px;
        font-family: var(--vc-pingfang-light);
        color: #666666;
        line-height: 26px;

        span:last-child {
            flex-shrink: 0;
        }

        span+span {
            padding-left: 16px;
        }
    }
}
</style>